import { Component, PropsWithChildren } from 'react'
import { View, Text } from '@tarojs/components'
import { AtList, AtListItem, AtIcon } from "taro-ui"
import { getPayDetail } from '../../api/home'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      costList: []
    }
  }
  componentWillMount() { }

  componentDidMount() {
    this.getPaydetail()
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  getPaydetail() {
    getPayDetail().then((res) => {
      this.setState({
        costList: res.data.data
      })
    })
  }
  onClick() {
    Taro.switchTab({
      url: '/pages/my/index'
    })
  }
  render() {
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>支付明细</Text>
          </View>
        </View>
        <View className='message'>
          <View className='day'>
            <View className='year'>2021年1页 v</View>
            <View className='cost'>支出￥1917.61</View>
          </View>
          <View className='costList'>
            <AtList>
              {
                this.state.costList?.map((item: any, index: number) => {
                  return <AtListItem
                    key={index}
                    title={item.title}
                    note={item.date}
                    extraText={item.price}
                    thumb={item.iconImg}
                  />
                })
              }
            </AtList>
          </View>
        </View>
      </View >
    )
  }
}
